<template>
  <view class="app bg-white">
    <z-paging
      ref="paging"
      class="scroll-list"
      v-model="rebateList"
      :default-page-size="limit"
      :fixed="true"
      :auto="false"
      :refresher-enabled="false"
      :show-loading-more-no-more-view="false"
      :auto-hide-loading-after-first-loaded="false"
      :min-delay="800"
      @query="getData"
    >
      <template #top>
        <view class="table-header">
          <text class="flex-5 flex items-center justify-center">订单号/日期</text>
          <text class="flex-3 flex items-center justify-center">奖励类型</text>
          <text class="flex-3 flex items-center justify-center">奖励金额</text>
        </view>
      </template>

      <view class="table-body">
        <view class="body-item" v-for="(item, idx) in rebateList" :key="idx">
          <view class="flex flex-col flex-5 items-center justify-center">
            <view class="flex flex-col">
              <text class="font-size-26rpx mb-3rpx"> {{ item.order_no }}</text>
              <text class="body-date">{{ simplifyTime(item.created_at) }}</text>
            </view>
          </view>
          <text class="body-type flex-3 flex items-center justify-center">
            {{ rebateTypeTitles[item.type] || '未知' }}
          </text>
          <text class="body-money flex-3 flex items-center justify-center">￥{{ item.money }}</text>
        </view>
      </view>

      <template #loading>
        <view class="loading">
          <mt-logo-loading :size="88"></mt-logo-loading>
        </view>
      </template>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
  import mtLogoLoading from '@/components/mt-loading/mt-logo-loading.vue';
  import { ref, nextTick } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { simplifyTime } from '@/utils/funclib';
  import { report } from '@/utils/exception';
  import { getRebateRecord as getDataApi } from '@/api/rebate';
  import type { RebateRecord } from '@/types/rebate';

  const limit = 20;
  const paging = ref();
  const rebateTypeTitles = ['未知', '直推奖', '见单奖', '伯乐奖', '平级奖', '级差奖', '团队奖', '推荐奖'];
  const rebateList = ref<RebateRecord[]>([]);

  const getData = (pageNo: number, pageSize: number) => {
    // const list: RebateRecord[] = [];
    // for (let i = 0; i < 45; i++) {
    //   list.push({
    //     order_no: 'MD250107144930513284',
    //     created_at: '2024-12-29 12:09:12',
    //     type: 2,
    //     money: '100.07',
    //   });
    // }
    // paging.value.complete(list);

    getDataApi(pageNo, pageSize)
      .then((res) => {
        paging.value.complete(res.data.list);
      })
      .catch((err) => {
        report(err);
        paging.value.complete(false);
      });
  };

  onLoad(() => {
    nextTick(() => {
      paging.value.reload();
    });
  });
</script>

<style lang="scss" scoped>
  .table-header {
    display: flex;
    padding: 0 25rpx;
    height: 80rpx;
    font-weight: 600;
    color: #e8fffe;
    background: $themeColor;
  }

  .table-body {
    padding: 0 25rpx;

    .body-item {
      display: flex;
      height: 100rpx;

      &:not(:last-child) {
        border-bottom: 1px solid #f5f5f5;
      }

      .body-date {
        color: #b2b2b2;
        font-size: 24rpx;
        letter-spacing: 1rpx;
      }

      .body-money {
        font-weight: 600;
        color: $themeColor;
      }
    }
  }

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600rpx;
  }
</style>
